<script setup lang="ts">

</script>

<template>
  <div class="container">
    <div class="box">
      <div class="left-box">
        <p class="left-box-boldtext">
          Discover, collect, and charity in extraordinary NFT marketplace
        </p>
        <p class="left-box-slimtext">
          In aenean posuere lorem risus nec. Tempor tincidunt aenean purus purus vestibulum nibh mi venenatis
        </p>
        <div class="left-box-btnwrapper">
          <button class="left-box-explorebtn selected">Explore</button>
          <button class="left-box-createbtn">Create</button>
        </div>
      </div>
      <div class="right-box">
        <img class="display-nft" src="https://images.unsplash.com/photo-1620641788421-7a1c342ea42e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1074&q=80" alt="unsplash-OG44d93i-NJk" border="0">
        <div class="infowrapper">
          <div class="info">
            <img class="info-img" src="https://images.unsplash.com/photo-1535207010348-71e47296838a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=385&q=80" alt="unsplash-OG44d93i-NJk" border="0">
            <div>
              <p>Laura</p>
              <p>0.21 Weth</p>
            </div>
          </div>
          <div class="info2">
            <p>WE ARE HERE</p>
            <div class="iconwrapper">
              <svg width="22" height="20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M5.7365 2C3.6575 2 1.5 3.8804 1.5 6.5135c0 3.1074 2.3236 5.9603 4.8612 8.1207 1.2458 1.0606 2.4954 1.9137 3.4352 2.5022.4692.2937.8593.5203 1.1305.6727L11 17.85l.0731-.0409a27.984 27.984 0 0 0 1.1304-.6727c.9399-.5885 2.1895-1.4416 3.4353-2.5022C18.1764 12.4738 20.5 9.6209 20.5 6.5135 20.5 3.8805 18.3425 2 16.2635 2c-2.1054 0-3.8008 1.389-4.552 3.6426a.75.75 0 0 1-1.423 0C9.5373 3.389 7.8418 2 5.7365 2ZM11 18.7027l.3426.6672a.7502.7502 0 0 1-.6852 0L11 18.7027ZM0 6.5135C0 3.052 2.829.5 5.7365.5 8.0298.5 9.8808 1.7262 11 3.6048 12.1192 1.7262 13.9702.5 16.2635.5 19.171.5 22 3.052 22 6.5135c0 3.8183-2.8014 7.06-5.3888 9.2628-1.3167 1.121-2.6296 2.0166-3.6116 2.6314-.4918.308-.9025.5467-1.1918.7092a19.142 19.142 0 0 1-.4301.2347l-.0248.013-.007.0036-.0021.0011c-.0003.0001-.0012.0006-.3438-.6666-.3426.6672-.3424.6673-.3426.6672l-.0033-.0017-.007-.0036-.0248-.013a19.142 19.142 0 0 1-.4301-.2347 29.324 29.324 0 0 1-1.1918-.7092c-.982-.6148-2.295-1.5104-3.6116-2.6314C2.8014 13.5735 0 10.3318 0 6.5135Z" fill="#E0E0E0"/>
              </svg>
              25
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
// 每个父元素只在内部管理自己的直接子元素，不要管理子元素的子元素。
// 例如 .box 元素只管理 .left-box 和 .right-box 元素，不要管理 .left-box 元素的子元素。
// 这样避免样式层级太深，难以维护。
.container {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-y: auto;
  overflow-x: hidden;
  background-color: #1F1D2B;
  padding: 0 20px;

  &::before {
    content: "";
    position: absolute;
    width: 123px;
    height: 123px;
    left: 60%;
    top: 138px;
    filter: blur(90px);
    background-color: #FB37FF;
  }
  &::after {
    content: "";
    position: absolute;
    width: 123px;
    height: 123px;
    left: 80%;
    top: 550px;
    background-color: #18B2DE;
    filter: blur(80px);
  }
  // 虽然 .box 元素拥有 .left-box 和 .right-box 子元素，但为了方便管理，还是把 .box 元素的子元素样式写在外面。
  .box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 80px;
  }
}

.box {
  .left-box {
    animation: left-slide 0.8s ease-in-out;
    max-height: 500px;
    max-width: 55%;
    overflow: hidden;
    &-boldtext {
      margin: 0;
      font-family: Poppins,sans-serif;
      color: #FFFFFF;
      font-size: 65px;
      font-weight: 600;
      line-height: 60px;
      letter-spacing: -2px;
      text-align: left;
    }
    &-slimtext {
      margin: 24px 0;
      font-family: Poppins,sans-serif;
      color: #FFFFFF;
      font-size: 16px;
      font-weight: 400;
      line-height: 18px;
      letter-spacing: 1px;
      text-align: left;
    }
    &-btnwrapper {
      display: flex;
    }
    &-explorebtn {
      cursor: pointer;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #1F1D2B;
      padding: 8px 38px;
      border-radius: 16px;

      font-family: 'Poppins',sans-serif;
      font-style: normal;
      font-weight: 600;
      font-size: 13px;
      letter-spacing: -1px;
      color: #FFFFFF;
    }
    &-createbtn {
      cursor: pointer;
      margin-left: 20px;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: transparent;
      padding: 8px 38px;
      border: 1px solid #D7D7D7;
      border-radius: 16px;

      font-family: 'Poppins',sans-serif;
      font-style: normal;
      font-weight: 600;
      font-size: 13px;
      letter-spacing: -1px;
      color: #FFFFFF;
    }
    .selected {
      border: none;
      background: linear-gradient(103.91deg, #9B51E0 21.01%, rgba(48, 129, 237, 0.8) 100%);
    }
  }
  .right-box {
    animation: right-slide 0.8s ease-in-out;
    padding: 14px;
    border: 1px solid;
    background: linear-gradient(169.44deg, rgba(58, 129, 191, 0.08) 1.85%, rgba(65, 48, 90, 0.08) 98.72%);
    border-radius: 35px;
    max-height: 450px;
    max-width: 50%;
    overflow: hidden;
    &-nft {
      object-fit: cover;
      flex-shrink: 0;
      width: 300px;
      height: 300px;
      border-radius: 20px;
    }

    .infowrapper {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 10px;
    }

    .info {
      display: flex;
      align-items: center;
      font-family: 'Poppins',sans-serif;
      font-style: normal;
      color: #FFFFFF;
      font-weight: 600;
      font-size: 12px;
      p {
        margin: 0;
      }
      &-img {
        object-fit: cover;
        flex-shrink: 0;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        margin-right: 10px;
      }
    }
    .info2 {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      font-family: 'Poppins',sans-serif;
      color: #FFFFFF;
      font-style: normal;
      font-weight: 600;
      font-size: 12px;
      p {
        margin: 0;
      }
      .iconwrapper {
        display: flex;
        align-items: center;
        svg {
          margin-right: 5px;
        }
      }
    }
  }
}

@keyframes left-slide {
  from {
    transform: translateX(-700px);
  }
  to {
    transform: translateX(0px);
  }
}

@keyframes right-slide {
  from {
    transform: translateX(550px);
  }
  to {
    transform: translateX(0px);
  }
}
</style>